<template>
  <div
    class="socrates"
    :class="customClass"
    v-if="items.length>0"
  >
    <div
      class="socrates-inner"
      :style="paddingStyle"
    >
      <div
        class="socrates-item"
        :style="paddingStyle"
        v-for="(item,index) in items"
        :key="index"
      >
        <div
          class="socrates-item-inner"
          :style="backgroundStyle"
        >
          <view class="socrates-item__title">{{item.title}}</view>
          <view class="socrates-item__desc">{{item.desc}}</view>
          <view class="socrates-item__media">
            <image
              v-if="item.cover"
              :src="item.cover"
              mode="aspectFit"
              class="socrates-item__thumb"
            />
            <van-icon
              v-else-if="item.icon"
              :name="item.icon"
            />
          </view>
        </div>
      </div>
    </div>
    <view
      class="socrates-dummy"
      :style="dummyStyle"
    />
  </div>
</template>

<script>
export default {
  name: 'Socrates',
  props: {
    items: {
      type: Array,
      default: []
    },
    ratio: {
      type: Number,
      default: 2
    },
    customClass: String,
    gutter: {
      type: [Number, String],
      default: 5
    },
    bgcolor: String,
    iconWidth: [Number, String],
    iconHeight: [Number, String]
  },
  computed: {
    dummyStyle () {
      let ratio = 100
      if (this.ratio > 0) {
        ratio /= this.ratio
      }
      return `padding-top:${ratio}%`
    },
    paddingStyle () {
      if (this.gutter) {
        let padding = this.addUnit(this.gutter)
        return `padding: ${padding};`
      } else {
        return ''
      }
    },
    backgroundStyle () {
      if (this.bgcolor) {
        return `background: ${this.bgcolor};`
      } else {
        return ''
      }
    },
    iconStyle () {
      let style = []
      if (this.iconWidth) {
        let width = this.addUnit(this.iconWidth)
        style.push(`width:${width}`)
      }
      if (this.iconHeight) {
        let height = this.addUnit(this.iconHeight)
        style.push(`height:${height}`)
      }
      return style.join(';')
    }
  },
  methods: {
    addUnit (value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    }
  }
}
</script>

<style lang="less" scoped>
.socrates {
  position: relative;
  width: 100%;
  &-dummy {
    display: block;
    padding-top: 100%;
  }
  &-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    &::before,
    &::after {
      display: table;
      content: " ";
    }
    &::after {
      clear: both;
    }
  }

  &-item {
    float: left;
    height: 50%;
    width: 50%;
    &:first-child {
      height: 100%;
    }
    &-inner {
      background: #fff;
      width: 100%;
      height: 100%;
      padding: 5%;
      position: relative;
      z-index: 0;
    }
    &__desc {
      margin-top: 15px;
      opacity: 0.6;
      font-size: 80%;
      width: 70%;
    }
    &__media {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      z-index: -1;
      text-align: right;
      padding: 5%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      overflow: hidden;
    }
    &__thumb {
      max-height: 100%;
      max-width: 100%;
      width: 50%;
      height: 100%;
    }
  }
}
</style>
